import { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Image, Navigator, Swiper, SwiperItem, Button } from '@tarojs/components'
import { connect } from 'react-redux'
import { staticUrl } from '@/utils'
import Iconfont from '@/components/Iconfont'
import { getAccessId, clearUserInfo } from '@/store/user/action'
import { clearCarInfo } from '@/store/car/action'
import { loginMethod } from '@/utils/login'
import { getUserDetails, getOrderConfig, insuranceProgress, getToolsList, changeUserInfo } from '@/api/user'
import { writeOffCoupon } from '@/api/coupon'
import { base64_decode, utf8to16 } from '@/utils/base64'
import './index.scss'

const avatar = staticUrl('/img/others/default_head_click.png')
const topbar = staticUrl('/img/user/topbar.png')
const orderIcon = staticUrl('/img/user/order-icon.png')
const couponIcon = staticUrl('/img/index/coupon-icon.png')
const couponIcon1 = staticUrl('/img/user/coupon-icon1.png')
const couponIcon2 = staticUrl('/img/user/coupon-icon2.png')
const StoredIcon = staticUrl('/img/user/stored.png')
const redpacketIcon = staticUrl('/img/user/redpacket-icon.png')
const serviceIcon = staticUrl('/img/user/service-icon.png')

// 新修改图
const Pay = staticUrl('/img/user/pay.png')
const Service = staticUrl('/img/user/service.png')
const InService = staticUrl('/img/user/inService.png')
const Complete = staticUrl('/img/user/complete.png')
const Refund = staticUrl('/img/user/refund.png')
const Refunded = staticUrl('/img/user/refunded.png')
const Sales = staticUrl('/img/user/sales.png')
const Testing = staticUrl('/img/user/testing.png')
const Insurance = staticUrl('/img/user/insurance.png')
const Store = staticUrl('/img/user/store.png')
const Car = staticUrl('/img/user/car.png')
const Exclusive = staticUrl('/img/user/exclusive.png')
const Agreement = staticUrl('/img/user/agreement.png')
const Warranty = staticUrl('/img/user/warranty.png')
const Distribution = staticUrl('/img/user/distribution.png')
const eService = staticUrl('/img/user/e_service.png')
const kf = staticUrl('/img/user/fk.png')
const consume = staticUrl('/img/user/consume.png')
const Cheap = staticUrl('/img/user/cheap.png')
const NewCheck = staticUrl('/img/user/new_check.png')

import { IS_USERINFO } from '@/store/user/action-types'

import CryptoJS from 'crypto-js'

const domain: string = `${BASE_API_URL}`
const getByteLen = (val: any) => {
  let len = 0
  if (!val) {
    len = 0
  } else {
    for (let i = 0; i < val.length; i++) {
      if (String(val[i]).match(/[^\x00-\xff]/gi) !== null) {
        len += 3
      } else {
        len += 1
      }
    }
  }
  return len.toString()
}

interface State {
  userDetails: GlobalUser.Details | null
  orderStatus: {
    count: number
    label: string
    type: number
  }[]
  progressList: any
  unionid: string
  userId: number,
  status: any,
  reason: any,
  info: any,
  tools: any
}

@connect<any>(({ user }) => ({ user }), _dispatch => ({
  dispatchUserInfo(params) {
    return _dispatch(getAccessId(params))
  },
  dispatchClearCar() {
    return _dispatch(clearCarInfo())
  },
  dispatchClearUserInfo() {
    return _dispatch(clearUserInfo())
  }
}))
class User extends Component<any, State> {
  constructor (props) {
    super(props)
    let userInfo = {
      unionid: '',
      userId: 0
    }
    if (Object.keys(this.props.user.userInfo).includes('userId')) {
      userInfo = {
        unionid: this.props.user.userInfo.unionid,
        userId: this.props.user.userInfo.userId
      }
    }
    this.state = {
      userDetails: null,
      orderStatus: [],
      progressList: [],
      ...userInfo,
      status: '',
      reason: '',
      info: {},
      tools: []
    }
  }


  componentDidMount() { }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (Object.keys(nextProps.user.userInfo).includes('userId')) {
      const { userInfo } = nextProps.user
      if (this.state.unionid !== userInfo.unionid || this.state.userId !== userInfo.userId) {
        this.setState({
          unionid: userInfo.unionid,
          userId: userInfo.userId
        })
      }
    }
  }
  componentDidShow() {
    let { userId } = this.state
    if (userId) {
      this.initPage(userId)
      const USERINFO = Taro.getStorageSync('IS_USERINFO')
      this.setState({
        info: USERINFO
      })
      this.getToolsList(USERINFO.mobile)
    } else {
      // 未登录
    }
  }
  static options = {
    addGlobalClass: true
  }

  /**
   * 获取菜单
   */
  getToolsList(mobile) {
    getToolsList({ mobile }).then(res => {
      this.setState({
        tools: res.data.data
      })
    })
  }

  /**
   * 我的e服务点击
  * **/
  gotoEService() {
    let path = '/maintain/index'
    Taro.navigateTo({
      url: `/pages/webview/index/index?path=${path}`
    })
  }

  /**
   * 车险团长点击
  * **/
  gotoDistribution() {
    const USERINFO = Taro.getStorageSync('IS_USERINFO')
    console.log('USERINFO', USERINFO)
    let query = {
      mobile: USERINFO.mobile
    }
    Taro.navigateTo({ url: `/pages/webview/index/index?path=${'/distribution/recycling'}&query=${JSON.stringify(query)}` })
  }
  /**
 * 车险团长点击
* **/
  gotoDistribution1() {
    const USERINFO = Taro.getStorageSync('IS_USERINFO')
    console.log('USERINFO', USERINFO)
    let query = {
      mobile: USERINFO.mobile
    }
    console.log(`/pages/webview/index/index?path=${'/check/recycling'}&query=${JSON.stringify(query)}`)
    Taro.navigateTo({ url: `/pages/webview/index/index?path=${'/check/recycling'}&query=${JSON.stringify(query)}` })
  }
  /**
* 车险团长点击
* **/
  gotoDistribution2() {
    const USERINFO = Taro.getStorageSync('IS_USERINFO')
    console.log('USERINFO', USERINFO)
    let query = {
      mobile: USERINFO.mobile
    }
    Taro.navigateTo({ url: `/pages/webview/index/index?path=${'/check/transfer'}&query=${JSON.stringify(query)}` })
  }
  /**
 * 检测订单
* **/
  gotoNewCheck() {
    Taro.navigateTo({ url: `/pages/webview/index/index?path=${'/check/order'}` })
  }


  /**
   * 股东分销
  **/
  gotoretail() {
    const USERINFO = Taro.getStorageSync('IS_USERINFO')
    console.log('USERINFO', USERINFO)
    let query = {
      userId: USERINFO.userId
    }
    Taro.navigateTo({ url: `/pages/webview/index/index?path=${'/retail/stockholder'}&query=${JSON.stringify(query)}` })
  }


  initPage(userId) {
    // 已登录
    getUserDetails({
      id: userId
    }).then(res => {
      const data = res?.data.data
      const { avatar } = this.props.user.userInfo
      if (avatar) {
        data.avatarUrl = avatar
      }
      if (data.userWechatMini) {
        const { avatarurl, nickname } = data.userWechatMini
        if (avatarurl) {
          data.avatarUrl = avatarurl
        }
        if (nickname) {
          data.nickname = nickname
        }
      }
      this.setState({
        userDetails: data
      })
    })
    getOrderConfig({
      id: userId
    }).then(res => {
      const data = res?.data.data
      this.setState({
        orderStatus: data
      })
    })
    insuranceProgress({
      id: userId
    }).then(res => {
      const data = res?.data.data
      this.setState({
        progressList: data
      })
    })
  }
  gotoLink(e: any, link: string) {
    if (process.env.TARO_ENV === 'weapp') {
      Taro.navigateTo({
        url: link
      })
    }
  }

  userInfo(e) {
    const { target } = e
    if (target.errMsg === 'getUserInfo:ok') {
      const { dispatchUserInfo } = this.props
      dispatchUserInfo(e.detail).then(res => {
        const { userInfo } = this.props.user
        if (userInfo.userId) {
          this.initPage(userInfo.userId)
        } else {
          loginMethod()
        }
      })
    }
  }

  logout() {
    Taro.showModal({
      title: '提示',
      content: "确定退出登录吗？",
      cancelColor: '#999999',
      confirmColor: '#12b3ff',
      success: (res) => {
        if (res.confirm) {
          const { dispatchClearCar, dispatchClearUserInfo } = this.props
          dispatchClearCar()
          dispatchClearUserInfo()
          Taro.removeStorageSync('IS_USERINFO')
          Taro.removeStorageSync('IS_OPENID')
          Taro.setStorageSync('logout', true)
          Taro.removeStorageSync('REGISTER_DATA')
          this.setState({
            userDetails: null
          })
          Taro.switchTab({
            url: '/pages/tabbar/index/index'
          })
        }
      }
    })


  }

  async getAvatar(e) {
    this.uploadFile(e.detail.avatarUrl)

  }

  getAuth() {
    const USERINFO = Taro.getStorageSync(IS_USERINFO)
    let { accessId, accessKey, serverTime } = USERINFO
    let entityLength: string = '0'
    let clientTime = Date.parse(new Date()['toGMTString']()) / 1000

    if (/^P(OST|UT)$/.test('POST')) {
      entityLength = getByteLen({})
    }

    let clientTimeStamp = typeof clientTime === 'number' ? clientTime : 0
    if (!clientTimeStamp) {
      let date = new Date()['toGMTString']()
      clientTimeStamp = Date.parse(date) / 1000// 客户端时间戳
      clientTime = clientTimeStamp
    }
    let serverTimeStamp = serverTime

    // 时间差的处理
    let difTimestamp = Number(serverTimeStamp) - Number(clientTimeStamp)// 客户端时间与服务器时间差
    let clientCorrectTimeStamp = +new Date() / 1000 + difTimestamp// 当下正确时间戳
    clientTime = new Date(clientCorrectTimeStamp * 1000)['toGMTString']()// 当下正确时间
    let str = 'POST' + '\\n' + 'v1/upload/create' + '\\n' + entityLength + '\\n' + clientTime
    let hash = CryptoJS.HmacSHA1(str, accessKey)
    let sha = hash.toString(CryptoJS.enc.Base64)
    let auth = 'Jekun ' + accessId + ':' + sha
    return {
      'Authorization': auth,
      'Entity-Date': clientTime,
      'Entity-Length': entityLength,
      'str': str,
      'accessKey': accessKey.substring(accessKey.length - 10)
    }
  }

  async uploadFile(filePath) {
    const { userDetails } = this.state
    const obj = await this.getAuth()
    Taro.uploadFile({
      url: domain + `/v1/upload/create?fields=path,id`,
      filePath,
      name: 'file',
      formData: {
        'act': 239,
        'fields': 'path,id',
        'relatedCode': 0
      },
      header: {
        "Content-Type": "multipart/form-data",
        'Authorization': obj['Authorization'],
        'Entity-Date': obj['Entity-Date'],
        'Entity-Length': obj['Entity-Length'],
        // 'str': obj['str'],
        // 'accessKey': obj['accessKey'],
      },
      success: (res) => {
        let data = res.data
        if (data) {
          data = JSON.parse(data)
          changeUserInfo({
            avatar: data.data.path,
          }).then(res => {
            const { userDetails } = this.state
            userDetails.avatarUrl = data.data.path
            this.setState({
              userDetails
            })
            Taro.showToast({
              title: "上传成功"
            })
          })
        }
      },
      fail: function (res) {
        Taro.showToast({
          title: "上传失败",
          icon: 'none'
        })
      }
    });
  }

  // 进度状态跳转
  statusLink({ id }) {
    const path: string = '/insurance/order-detail'
    const query: any = {
      id
    }
    Taro.navigateTo({ url: `/pages/webview/index/index?path=${path}&query=${JSON.stringify(query)}` })
  }
  //年审卡券扫码核销
  couponWriteOffScan() {
    Taro.scanCode({
      onlyFromCamera: true,
      success: (res) => {
        let data = res.result
        let qrcode: any = null
        if (data) {
          qrcode = utf8to16(base64_decode(data))
        }
        if (qrcode) {
          console.log(qrcode)
          qrcode = JSON.parse(qrcode)
          Taro.showModal({
            title: '确定核销？',
            content: `券码：${qrcode.id} 面值：${qrcode.baseAmount}元 \r\n发放门店：${qrcode.belongStoreName}`,
            success: function (res) {
              if (res.confirm) {
                Taro.showLoading()
                writeOffCoupon({ qrcode: data }).then(res => {
                  Taro.hideLoading()
                  Taro.showToast({
                    title: '核销成功',
                    icon: 'success'
                  })
                }).catch(err => {
                  console.log(err)
                  Taro.showModal({
                    title: '提示',
                    content: err.data.data.message,
                    showCancel: false
                  })
                })
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
        }


      }
    })
  }

  // 进度状态跳转
  handleOrderStatusLink(type) {
    if (type == -1) {
      Taro.navigateTo({ url: '/pages/order/list/index?refund=1' })
    } else {
      Taro.navigateTo({ url: `/pages/order/list/index?tabStatus=${type}` })
    }
  }

  gotoCustomerServer() {
    const path: string = '/customer/service'
    const query: any = {}
    Taro.navigateTo({ url: `/pages/webview/index/index?path=${path}&query=${JSON.stringify(query)}` })
  }

  render() {
    const { userDetails, orderStatus, progressList, unionid, userId, info, tools } = this.state
    let mobile, avatarUrl = avatar
    if (userDetails) {
      var reg = /(\d{3})\d{4}(\d{4})/;
      var newmobile = userDetails.mobile.replace(reg, "$1******$2")
      mobile = newmobile
      // 15522223331".replace);
      if (userDetails.avatarUrl) {
        avatarUrl = userDetails.avatarUrl
      }
    }
    return (
      <View className='user-container'>
        {
          userDetails ? (
            <View className='user'>{
              process.env.TARO_ENV === 'weapp' ? <View className='user-topbar-wrap'>
                <Image style='width: 100%;height: 100%' className='user-topbar' src={topbar} />

                <View className='user-info' onClick={e => this.gotoLink(e, '/pages/user/info/index')}>
                  <View className='user-avatar' onClick={e => { e.stopPropagation() }}>
                    <Button className='avatar-btn' openType='chooseAvatar' onChooseAvatar={this.getAvatar.bind(this)}>
                      <Image style='width: 100%;height: 100%' className='pic' src={avatarUrl} />
                    </Button>
                  </View>
                  <View className='user-nickname'>{mobile}</View>
                </View>
              </View> : <View className='user-topbar-wrap user-topbar-wrap__alipay'>
                <Image style='width: 100%;height: 100%' className='user-topbar' src={topbar} />

                <View className='user-info'>
                  <View className='user-nickname'>{mobile}</View>
                </View>
              </View>
            }

              <View className='card-wrap'>

                {/* 储值，红包，年卡，卡券 */}
                <View className='card-group'>
                  <View className='card-hd' onClick={() => Taro.navigateTo({ url: '/pages/service/index/index' })}>
                    <View className='text'>
                      <Image className='text-img' src={couponIcon}></Image>
                      我的余额
                    </View>
                    <View className='more'>
                      <View className='span'>全部余额</View>
                      <Iconfont size='30' color='#CCCCCC' name='icon-jiantourukou' />
                    </View>
                  </View>
                  <View className='card-item2'>
                    <View className='card-item'>
                      <View className='card-list2' onClick={() => Taro.navigateTo({ url: '/pages/service/stored/index' })}>
                        <View className='card-list2-tp'><View className='none'>{userDetails.rechargeAmount >= 10000 ? '9999+' : userDetails.rechargeAmount}</View></View>
                        <View className='card-list2-bt'>
                          <Image className='text-img' src={StoredIcon}></Image>
                          储值
                        </View>
                      </View>
                      <View className='card-list2' onClick={() => Taro.navigateTo({ url: '/pages/redpacket/index/index' })}>
                        <View className='card-list2-tp'><View className='none'>{userDetails.redPacketAmount >= 10000 ? '9999+' : userDetails.redPacketAmount}</View></View>
                        <View className='card-list2-bt'>
                          <Image className='text-img' src={redpacketIcon}></Image>
                          红包
                        </View>
                      </View>
                      <View className='card-list2' onClick={() => Taro.navigateTo({ url: '/pages/coupon/index/index' })}>
                        <View className='card-list2-tp'><View className='none'>{userDetails.couponItemCount >= 10000 ? '9999+' : userDetails.couponItemCount}</View></View>
                        <View className='card-list2-bt'>
                          <Image className='text-img' src={couponIcon1}></Image>
                          卡券
                        </View>
                      </View>
                      <View className='card-list2' onClick={() => Taro.navigateTo({ url: '/pages/annual/balance/index' })}>
                        <View className='card-list2-tp'><View className='none'>{userDetails.annualCardCount >= 10000 ? '9999+' : userDetails.annualCardCount}</View></View>
                        <View className='card-list2-bt'>
                          <Image className='text-img' src={couponIcon2}></Image>
                          年卡券
                        </View>
                      </View>
                    </View>
                  </View>
                </View>

                <View className='card-group'>
                  <View className='card-hd' onClick={() => Taro.navigateTo({ url: '/pages/order/list/index' })}>
                    <View className='text'>
                      <Image className='text-img' src={orderIcon}></Image>
                      我的订单
                    </View>
                    <View className='more'>
                      <View className='span'>全部订单</View>
                      <Iconfont size='30' color='#CCCCCC' name='icon-jiantourukou' />
                    </View>
                  </View>
                  <View className='card-item'>
                    {
                      orderStatus && orderStatus.map(v => {
                        return (
                          <View className='card-list' key={v.type} onClick={() => this.handleOrderStatusLink(v.type)}>
                            <View className='viewblock'>
                              {v.type === 0 && <Image src={Pay} className="icon_img" />}
                              {v.type === 1 && <Image src={Service} className="icon_img" />}
                              {v.type === 2 && <Image src={InService} className="icon_img" />}
                              {v.type === 3 && <Image src={Complete} className="icon_img" />}
                              {v.type === 6 && <Image src={Refund} className="icon_img" />}
                              {v.type === 9 && <Image src={Refunded} className="icon_img" />}
                              {v.type === -1 && <Image src={Sales} className="icon_img" />}
                              {v.label}
                              {v.count > 0 && <View className='span'>{v.count}</View>}
                            </View>
                          </View>
                        )
                      })
                    }

                    {/* <View className='card-list' onClick={() => Taro.navigateTo({ url: '/pages/order/list/index?refund=1' })}>
                      <View className='viewblock'>
                        <Image src={Sales} className="icon_img" />
                        退款/售后
                      </View>
                    </View> */}
                  </View>
                  {
                    progressList && progressList.length > 0 && (
                      <View className='order-status-progress'>
                        <Swiper vertical autoplay circular className='order-status-wrap'>
                          {
                            progressList.map(v => {
                              return (
                                <SwiperItem key={v.orderNumber}>
                                  <View onClick={() => this.statusLink(v)} className='order-status'>
                                    <View className='text'>投保进度：<View className='em'>{v.statusLabel}</View></View>
                                    <View className='row'>
                                      <View className='col'>
                                        <View className='text'>车牌：<View className='strong'>{v.carLicense}</View></View>
                                      </View>
                                      <View className='col'>
                                        <View className='text'>承保单位：<View className='strong'>{v.supplyCompanyName}</View></View>
                                      </View>
                                    </View>
                                  </View>
                                </SwiperItem>
                              )
                            })
                          }
                        </Swiper>
                      </View>
                    )
                  }
                </View>

                <View className='card-group'>
                  <View className='card-hd'>
                    <View className='text'>
                      <Image className='text-img' src={serviceIcon}></Image>
                      服务项目
                    </View>
                  </View>
                  <View className='service-item'>
                    {
                      tools && tools.map((e, eIndex) => {
                        return (
                          <View className='service-list' key={eIndex}>
                            {
                              // 小程序路径跳转
                              e.type === 'mini' && <Navigator url={e.path} className='viewblock'>
                                <Image src={e.icon} className="icon_img" />
                                {e.name}
                              </Navigator>
                            }
                            {
                              // h5路径跳转
                              e.type === 'h5' && <Navigator url={'/pages/webview/index/index?path=' + e.path} className='viewblock'>
                                <Image src={e.icon} className="icon_img" />
                                {e.name}
                              </Navigator>
                            }
                            {
                              // 年审卡券核销
                              e.type === 'couponWriteOff' && process.env.TARO_ENV === 'weapp' && <View className='viewblock' onClick={() => this.couponWriteOffScan()}>
                                <Image src={e.icon} className="icon_img" />
                                {e.name}
                              </View>
                            }
                          </View>
                        )
                      })
                    }
                    <View className='service-list'>
                      <Navigator url='/pages/detection/record/index' className='viewblock'>
                        <Image src={Testing} className="icon_img" />
                        检测报告
                      </Navigator>
                    </View>
                    {
                      process.env.TARO_ENV === 'weapp' ? <View className='service-list'>
                        <Navigator url='/pages/webview/index/index?path=/insurance/driving' className='viewblock'>
                          <Image src={Insurance} className="icon_img" />
                          车险服务
                        </Navigator>
                      </View> : null
                    }

                    <View className='service-list'>
                      <Navigator url='/pages/car/list/index' className='viewblock'>
                        <Image src={Car} className="icon_img" />
                        我的爱车
                      </Navigator>
                    </View>
                    <View className='service-list'>
                      <Navigator url='/pages/adviser/index/index' className='viewblock'>
                        <Image src={Exclusive} className="icon_img" />
                        专属顾问
                      </Navigator>
                    </View>
                    {/* <View className='service-list'>
                      <Navigator url='/pages/store/index/index' className='viewblock'>
                        <Image src={Store} className="icon_img" />
                        常用门店
                      </Navigator>
                    </View> */}
                    <View className='service-list'>
                      <Navigator url='/pages/annual/list/index' className='viewblock'>
                        <Image src={Agreement} className="icon_img" />
                        电子协议
                      </Navigator>
                    </View>
                    <View className='service-list'>
                      <Navigator url='/pages/warranty/list/index' className='viewblock'>
                        <Image src={Warranty} className="icon_img" />
                        产品质保
                      </Navigator>
                    </View>

                    {
                      process.env.TARO_ENV === 'weapp' ? <View className='service-list'>
                        <View className='viewblock' onClick={() => this.gotoDistribution1()}>
                          <Image src={Distribution} className="icon_img" />
                          电池评估
                        </View>
                      </View> : null
                    }
                    {
                      process.env.TARO_ENV === 'weapp' ? <View className='service-list'>
                        <View className='viewblock' onClick={() => this.gotoDistribution2()}>
                          <Image src={Distribution} className="icon_img" />
                          疑似调表
                        </View>
                      </View> : null
                    }
                    {
                      process.env.TARO_ENV === 'weapp' ? <View className='service-list'>
                        <View className='viewblock' onClick={() => this.gotoEService()}>
                          <Image src={eService} className="icon_img" />
                          我的e服务
                        </View>
                      </View> : null
                    }

                    {/* {
                      process.env.TARO_ENV === 'weapp' ? <View className='service-list'>
                        <Button className='viewblock self-btn'
                          session-from={`nickName=${info.nickName}|avatarUrl=${info.avatar}|foreignid=${info.unionid}`}
                          show-message-card="true"
                          open-type="contact">
                          <Image src={kf} className="icon_img" />
                          联系客服
                        </Button>
                      </View> : null
                    } */}
                    {
                      process.env.TARO_ENV === 'weapp' ? <View className='service-list'>
                        <Button className='viewblock self-btn'
                          onClick={() => this.gotoCustomerServer()}>
                          <Image src={kf} className="icon_img" />
                          联系客服
                        </Button>
                      </View> : null
                    }

                    {
                      process.env.TARO_ENV === 'weapp' && userDetails.isDistributionUser == 1 ?
                        <View className='service-list'>
                          <View className='viewblock' onClick={() => this.gotoretail()}>
                            <Image src={Distribution} className="icon_img" />
                            股东分销
                          </View>
                        </View> : null
                    }
                    <View className='service-list'>
                      <Navigator url='/pages/user/consume/index' className='viewblock'>
                        <Image src={consume} className="icon_img" />
                        消费记录
                      </Navigator>
                    </View>

                    <View className='service-list'>
                      <View className='viewblock' onClick={() => this.gotoNewCheck()}>
                        <Image src={NewCheck} className="icon_img" />
                        检测订单
                      </View>
                    </View>

                  </View>
                </View>
                {/*
								*/}

                <View className='card-group'>
                  <View className='switch-account' onClick={() => loginMethod()}>
                    切换账号
                  </View>
                  <View className='switch-account' onClick={() => this.logout()}>
                    退出登录
                  </View>
                </View>
              </View>
            </View>
          ) : (
            <View className='user' onClick={() => {
              if (!unionid) return
              if (userId) return
              loginMethod()
            }}
            >
              {
                process.env.TARO_ENV === 'weapp' ? <View className='user-topbar-wrap'>
                  <Image style='width: 100%;height: 100%' className='user-topbar' src={topbar} />
                  <View className='user-info'>
                    <Button type='default' onClick={() => loginMethod()} className='getuserinfo'></Button>
                    <View className='user-avatar'>
                      <Image style='width: 100%;height: 100%' className='pic' src={avatarUrl} />
                    </View>
                    <View className='user-nickname'>去登录</View>
                  </View>
                </View> : <View className='user-topbar-wrap user-topbar-wrap__alipay'>
                  <Image style='width: 100%;height: 100%' className='user-topbar' src={topbar} />
                  <View className='user-info'>
                    <Button type='default' onClick={() => loginMethod()} className='getuserinfo'></Button>
                    <View className='user-nickname'>去登录</View>
                  </View>
                </View>
              }

              <View className='card-wrap'>
                <View className='card-group'>
                  <View className='card-item2'>
                    <View className='card-list2' >
                      <View className='card-list2-tp'><View className='none'>0</View></View>
                      <View className='card-list2-bt'>
                        <Image className='text-img' src={StoredIcon}></Image>
                        储值
                      </View>
                    </View>
                    <View className='card-list2' >
                      <View className='card-list2-tp'><View className='none'>0</View></View>
                      <View className='card-list2-bt'>
                        <Image className='text-img' src={redpacketIcon}></Image>
                        红包
                      </View>
                    </View>
                    <View className='card-list2' >
                      <View className='card-list2-tp'><View className='none'>0</View></View>
                      <View className='card-list2-bt'>
                        <Image className='text-img' src={couponIcon1}></Image>
                        卡券
                      </View>
                    </View>
                    <View className='card-list2' >
                      <View className='card-list2-tp'><View className='none'>0</View></View>
                      <View className='card-list2-bt'>
                        <Image className='text-img' src={couponIcon2}></Image>
                        年卡券
                      </View>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          )
        }
      </View>
    )
  }
}
export default User
